<template>
  <div>
   <LoveDog v-for="(item,index) in arr" :key="index"
    :dogUrl = "item.dogImgUrl"
    :dogName = "item.dogName"
    
    @loveDog = "loveDogFn"
   >
   </LoveDog>
   <p>你喜欢的狗如下：</p>
   <ul>
    <li v-for="(obj,index) in list" :key="index">
      {{ obj }}
    </li>
   </ul>
  </div>
</template>

<script>
import LoveDog from './components/LoveDog.vue'
export default {
   data() {
    return {
      arr: [
        {
          dogImgUrl:
            "https://img2.baidu.com/it/u=1276710692,838495929&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333",
          dogName: "博美",
        },
        {
          dogImgUrl:
            "https://img0.baidu.com/it/u=3689122752,92922196&fm=253&fmt=auto&app=138&f=JPEG?w=700&h=478",
          dogName: "泰迪",
        },
        {
          dogImgUrl:
            "https://img1.baidu.com/it/u=3158611882,3403279840&fm=253&fmt=auto&app=138&f=JPEG?w=700&h=495",
          dogName: "金毛",
        },
        {
          dogImgUrl:
            "https://img2.baidu.com/it/u=612886166,427312503&fm=253&fmt=auto&app=138&f=JPEG?w=224&h=267",
          dogName: "哈士奇",
        },
        {
          dogImgUrl:
            "https://img0.baidu.com/it/u=4070580909,3925217993&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300",
          dogName: "阿拉斯加",
        },
        {
          dogImgUrl:
            "https://img1.baidu.com/it/u=2525287048,2230670321&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=500",
          dogName: "萨摩耶",
        },
      ],
      list:[]
    }
   },
   components:{
    LoveDog
   },
   methods:{
    loveDogFn(dogName){
      
      this.list.push(dogName)
    }
   }
}
</script>

<style>

</style>